<template>
	<view class="mask" v-show="show" @click="closePreviewImage" id="PreviewImage-mask">
		<view class="iconfont icon-winfo-icon-guanbi close-icon" @click.stop="closePreviewImage">

		</view>
		<view class="overlay-wrap">

			<view class="imagecontent">
				<movable-area scale-area class="movable-area">
					<movable-view class="movable-view" direction="all" scale="true" scale-min="0.5" scale-max="8"
						:style="`height: ${viewHeight}`">
						<img ref="urlInfo" :src="urls" class="container-img" @longpress.prevent="longTap"
							@touchend.prevent="touchEnd" @touchmove.prevent="touchMove" @touchstart.prevent @load="loadImg"></img>
					</movable-view>
				</movable-area>
			</view>
		</view>
		<LongpressMenu :show.sync="LongpressMenuShow" @onQrDecoder="onQrDecoder"></LongpressMenu>
	</view>
</template>

<script>
	import LongpressMenu from './components/LongpressMenu.vue'
	import {
		onDecoder,
		isURL
	} from './qrcodeDecoder.js'
	import vueMain from "@/main.js";

	export default {
		components: {
			LongpressMenu
		},
		data() {
			return {
				show: true,
				urls: '',
				ifLongtap: true,
				WindowInfo: {},
				viewHeight: '100%',
				LongpressMenuShow: false
			}
		},
		created() {
			this.WindowInfo = uni.getWindowInfo();
			this.show = true
		},

		methods: {
			destoryDom() {
				const previewImageDom = document.getElementById('PreviewImage-mask')
				if (previewImageDom) {
					previewImageDom.remove();
				}
			},
			closePreviewImage(e) {
				this.show = false
				this.destoryDom()
				return e
			},
			touchEnd() {
				this.ifLongtap = true;
			},
			touchMove() {
				this.ifLongtap = false;
			},
			longTap() {
				if (!this.ifLongtap) return
				this.LongpressMenuShow = true
			},
			async onQrDecoder() {
				uni.showLoading()
				const data = await onDecoder(this.urls)
				uni.hideLoading()
				this.LongpressMenuShow = false
				if (data.success) {
					this.show = false
					this.destoryDom()
					// 如果是网址的话，直接打开
					if (isURL(data.data)) {
						window.open(data.data, '_blank');
					} else {
						uni.showModal({
							content: data.data,
							cancelText: vueMain.$t('index.Cancel'),
							confirmColor: "#61BDB2",
							confirmText: vueMain.$t('chat.Copy'),
							success: function(res) {
								if (res.confirm) {
									uni.setClipboardData({
										data: data.data,
										success: function() {
											console.log('fuzhichenggong');
										}
									});
								}
							}
						});
					}
				} else {
					uni.showToast({
						title: vueMain.$t('other.Content-not-recognized'),
						duration: 2000,
						icon: 'none'
					});
				}
			},
			loadImg(e) {
				console.log(this.$refs.urlInfo.offsetWidth);
				console.log(this.$refs.urlInfo.offsetHeight);
				console.log(this.WindowInfo.windowHeight);
				if (this.$refs.urlInfo.offsetHeight > this.WindowInfo.windowHeight) {
					this.viewHeight = this.$refs.urlInfo.offsetHeight + 'px'
				}
			}
		}

	}
</script>

<style lang="scss" scoped>
	.close-icon {
		position: absolute;
		right: 24rpx;
		top: 24rpx;
		color: #FFFFFF;
		font-size: 38rpx;
		z-index: 2007;
	}

	.mask {
		z-index: 10070;
		transition-duration: 300ms;
		transition-timing-function: ease-out;
		position: fixed;
		inset: 0px;
		background-color: rgba(0, 0, 0, 0.8);
		transition-property: opacity;
		display: flex;
		flex-direction: column;
		flex-shrink: 0;
		flex-grow: 0;
		flex-basis: auto;
		align-items: stretch;

		.overlay-wrap {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			flex: 1;
		}
	}

	.imagecontent {
		width: 100%;
		height: 100%;
		top: 0;
		position: fixed;

		.movable-area {
			height: 100%;
			width: 100%;
			position: fixed;
			overflow: hidden;

			.movable-view {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
				width: 100%;
				text-align: center;
			}
		}
	}

	.container-img {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		max-width: 100%;
		width: 100%;
		height: auto;
	}
</style>